import { activityActiveArticle, activityTopicArticle } from '@/services/api/api-home';
import ProCard from '@ant-design/pro-card';
import { Link } from '@umijs/max';
import { Avatar, Card, List, Typography } from 'antd';
import moment from 'moment';
import { useEffect, useState } from 'react';
import styles from '../../style.less';
import DetailsActive from '@/pages/cues/active/components/DetailsActive';
import DetailsSubmit from '@/pages/cues/topic/submit/components/DetailsSubmit';

interface ActivityArticleObserverProps {
  title: string;
  type: string;
  // value?: any;
  // onChange?: (value: any) => void;
}

const ActivityArticleObserver: React.FC<ActivityArticleObserverProps> = ({
  title,
  type,
  // value,
  // onChange,
}) => {
  /**
   * 市级部门上报选题
   */
  const [activityTopicData, setActivityTopicDataState] = useState<CuesSubmitData.SubmitPage[]>();
  const [activityActiveData, setActivityActiveDataState] = useState<CuesActiveData.ActivePage[]>();
  const [tab, setTab] = useState('tab1');

  useEffect(() => {
    activityTopic();
    activityActive();
  }, []);

  const activityTopic = async () => {
    const response = await activityTopicArticle({
      articleOrganizationType: type,
    });
    if (response.code == 0) {
      setActivityTopicDataState(response.data.data);
    }
  };
  const activityActive = async () => {
    const response = await activityActiveArticle({
      articleOrganizationType: type,
    });
    if (response.code == 0) {
      setActivityActiveDataState(response.data.data);
    }
  };
  const renderTopic = (item: CuesSubmitData.SubmitPage) => {
    return (
      <Card key={item.id} style={{ width: '100%', boxShadow: 'none' }} bordered={false}>
        <>
          <Card.Meta
            avatar={<Avatar src={item.articleOrganizationAvatar} />}
            title={
              <Typography.Text>
                <a>{item.articleOrganizationName}</a>
                &nbsp;报送&nbsp;
                {/* <TopicArticleDetailsDrawerForm
                  id={item.id}
                  render={`《${item.articleName}》`}
                  articleId={item.topicId}
                  onUpdate={() => { }}
                /> */}
                <DetailsSubmit
                  id={item.id}
                  name={item.articleName}
                  onRefurbish={() => {
                    // actionRef.current?.reload();
                  }}
                />
                &nbsp;到&nbsp;<a>{item.topicOrganizationName}</a>&nbsp;的&nbsp;
                <a>{item.topicName}</a>
              </Typography.Text>
            }
            description={
              <span className={styles.datetime} title={item.createdTime}>
                {moment(item.createdTime).fromNow()}
              </span>
            }
          />
        </>
      </Card>
    );
  };

  const renderActive = (item: CuesActiveData.ActivePage) => {
    return (
      <Card key={item.id} style={{ width: '100%', boxShadow: 'none' }} bordered={false}>
        <>
          <Card.Meta
            avatar={<Avatar src={item.articleOrganizationAvatar} />}
            title={
              <Typography.Text>
                <a>{item.articleOrganizationName}</a>
                &nbsp;主动报送&nbsp;
                <DetailsActive
                  id={item.id}
                  name={item.articleName}
                  onRefurbish={() => {
                    // actionRef?.current?.reload();
                  }}
                />
                {/* <ActiveDetailsDrawerForm
                  id={item.id}
                  articleId={item.id}
                  render={`《${item.articleName}》`}
                  onUpdate={() => { }}
                /> */}
              </Typography.Text>
            }
            description={
              <span className={styles.datetime} title={item.createdTime}>
                {moment(item.createdTime).fromNow()}
              </span>
            }
          />
        </>
      </Card>
    );
  };

  return (
    <>
      <ProCard
        title={title}
        tabs={{
          activeKey: tab,
          onChange: (key) => {
            setTab(key);
          },
        }}
        bordered
        extra={<Link to={'/cues'}>全部</Link>}
      >
        <ProCard.TabPane key="tab1" tab="选题计划">
          <List
            renderItem={(item) => renderTopic(item)}
            dataSource={activityTopicData}
            size="large"
          />
        </ProCard.TabPane>
        <ProCard.TabPane key="tab2" tab="主动报送">
          <List
            renderItem={(item) => renderActive(item)}
            dataSource={activityActiveData}
            size="large"
          />
        </ProCard.TabPane>
      </ProCard>
      <br />
    </>
  );
};

export default ActivityArticleObserver;
